import React from 'react';
import { Breadcrumbs, Typography, Link } from '@mui/material';
import { NavigateNext as NavigateNextIcon } from '@mui/icons-material';

export interface BreadcrumbItem {
    title: string;
    href?: string; // 可选链接地址，如果不提供则显示为文本
}

interface BreadcrumbProps {
    items: BreadcrumbItem[];
    separator?: React.ReactNode;
    className?: string;
}

/**
 * 面包屑导航组件
 * @param {BreadcrumbProps} props - 组件属性
 * @returns {React.ReactElement} 面包屑导航组件
 */
const Breadcrumb: React.FC<BreadcrumbProps> = ({ items, separator = <NavigateNextIcon fontSize="small" />, className }) => {
    if (!items || items.length === 0) {
        return null;
    }

    return (
        <Breadcrumbs separator={separator} aria-label="breadcrumb" className={className}>
            {items.map((item, index) => {
                const isLast = index === items.length - 1;

                return isLast ? (
                    // 最后一项显示为文本
                    <Typography key={index} color="text.primary">
                        {item.title}
                    </Typography>
                ) : (
                    // 非最后一项显示为链接
                    <Link
                        key={index}
                        underline="hover"
                        color="inherit"
                        href={item.href || '#'}
                        onClick={(e) => {
                            // 如果没有链接地址，阻止默认行为
                            if (!item.href) {
                                e.preventDefault();
                            }
                        }}>
                        {item.title}
                    </Link>
                );
            })}
        </Breadcrumbs>
    );
};

export default Breadcrumb;
